/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, Button, Alert, Typography, Table, Timeline, Icon, Drawer } from 'antd';
import {connect} from 'dva';
import request from '@/utils/request';
import ReactDataGrid from 'react-data-grid';
import AnnualBillingsDetail  from './AnnualBillingsDetail'
const { Text } = Typography;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[],
      annualBillingsModal:false
    };
  }
  componentDidMount() {
    const that=this;

  }
  render() {
    const reverceData=[...this.props.annualBillings].reverse()
    const defaultColumnProperties = {
      resizable: true,
    };

    const columns = [
      {
        title: '阶梯',
        dataIndex: 'name',
      },
      {
        title: '扣费水量',
        dataIndex: 'consumption',
      },
      {
        title: '阶梯价格',
        dataIndex: 'price',
      },
      {
        title: '污水处理费',
        dataIndex: 'sewage',
      },
      {
        title: '扣费总额',
        dataIndex: 'total',
      },
    ]

    return (
      <div>

        <Timeline  >
          {
            reverceData.map((item,index)=>{
              let data=[{
                id:1,
                name:'一阶',
                price:this.props.price_nature.level_one_price,
                sewage:this.props.price_nature.level_one_sewage_price,
                consumption:item.level_one_consumption,
                total:((Number(this.props.price_nature.level_one_price)+Number(this.props.price_nature.level_one_sewage_price))
                  *Number(item.level_one_consumption)).toFixed(3)
              },{
                id:2,
                name:'二阶',
                price:this.props.price_nature.level_two_price,
                sewage:this.props.price_nature.level_two_sewage_price,
                consumption:item.level_two_consumption,
                total:((Number(this.props.price_nature.level_two_price)+Number(this.props.price_nature.level_two_sewage_price))
                  *Number(item.level_two_consumption)).toFixed(3)
              },{
                id:3,
                name:'三阶',
                price:this.props.price_nature.level_three_price,
                sewage:this.props.price_nature.level_three_sewage_price,
                consumption:item.level_three_consumption,
                total:((Number(this.props.price_nature.level_three_price)+Number(this.props.price_nature.level_three_sewage_price))
                  *Number(item.level_three_consumption)).toFixed(3)
              },{
                id:4,
                name:'四阶',
                price:this.props.price_nature.level_four_price,
                sewage:this.props.price_nature.level_four_sewage_price,
                consumption:item.level_four_consumption,
                total:((Number(this.props.price_nature.level_four_price)+Number(this.props.price_nature.level_four_sewage_price))
                  *Number(item.level_four_consumption)).toFixed(3)
              }]
              return   <Timeline.Item key={index} dot={<Icon type={"clock-circle-o"} style={{ fontSize: '16px' }} />}>
                <h3> <Text strong mark>{item.year}年</Text></h3>
                <Alert message={<div>当年阶梯等级 : <span style={{ fontWeight: 'bold',marginRight:'10px' }}>{item.level}</span>  总扣费水量 : <span style={{ fontWeight: 'bold' }}>{item.total_consumption}</span> m³</div>
                }>
                  </Alert>
                <Table
                  style={{color: '#fff',maxWidth:this.state.maxWidth+'px',borderBottom:'1px solid #e8e8e8'}}
                  className="custom-small-table meter-table vendor-meter"
                  rowKey={'myId'}
                  dataSource={[...data]}
                  columns={columns}
                  pagination={false}
                  size="small"
                  bordered
                />
                <Button block type={'primary'} onClick={()=>{
                  this.setState({
                    year:item.year,
                    annualBillingsModal:true,

                  })
                }}>查看扣费详情</Button>
              </Timeline.Item>
            })
          }

        </Timeline>
        <Drawer
          title={`${this.state.year}年扣费详情`}
          placement="right"
          destroyOnClose
          onClose={() => {
            this.setState({
              annualBillingsModal:false,
            })
          }}
          className={'AnnualBillingsDetail'}
          width={700}
          visible={this.state.annualBillingsModal}
        >
          <AnnualBillingsDetail account_id={this.props.account_id} year={this.state.year} />
        </Drawer>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


